<template>
    <div class="py-28 text-center container m-auto max-w-screen-md w-full overflow-x-hidden">
        <h2 class="text-38px text-black mb-8 font-bold">COCloud <br class="block md:hidden">CDN 的優勢</h2>
        <div class="flex flex-col px-4 md:px-4">
            <div v-for="(item, i) in list" class="shadow-xl bg-white flex flex-col justify-center items-center md:items-stretch md:flex-row rounded-xl p-2 mb-6" :data-aos="(i%2 === 0) ?'fade-left':'fade-right'" data-aos-once="true" data-aos-delay="300">
                <div class="md:p-3 text-center md:w-1/5">
                    <img class="w-44" :src="item.img" :alt="item.title">
                    <h3 class="text-xl font-bold text-purple mb-2 whitespace-nowrap">
                        {{ item.title }}
                    </h3>
                </div>
                <div class="p-3 md:w-4/5">
                    <span class="border-t pt-4 md:pt-0 md:border-t-0 md:border-l border-slate-300 md:pl-6 inline-flex items-center h-full text-left text-grayBlack">
                        {{ item.desc }}
                    </span>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import AOS from 'aos';
import 'aos/dist/aos.css'; 

AOS.init();

import img1 from '../cdn/images/CDN_event_icon01.webp'
import img2 from '../cdn/images/CDN_event_icon02.webp'
import img3 from '../cdn/images/CDN_event_icon03.webp'
import img4 from '../cdn/images/CDN_event_icon04.webp'
import img5 from '../cdn/images/CDN_event_icon05.webp'
import img6 from '../cdn/images/CDN_event_icon06.webp'


const list = reactive([
    {
        img: img1,
        title: '全球穩定加速',
        desc: '2,500+全球節點,100Tbps+帶寬能力，六大洲覆蓋，主流運營商支持；為各類型業務保駕護航，提供高速、穩定的業務訪問體驗。'
    },
    {
        img: img2,
        title: '精準調度',
        desc: '全球精準IP庫，並具備自我進化能力；全網鏈路質量大數據實時分析、預測，為用戶精準調度最優節點，保障訪問質量。'
    },
    {
        img: img3,
        title: '簡單易用',
        desc: '接入方式簡單快速、提供自助化域名管理，並且支持多種可訂制配置項，方便客戶進行統計分析、日誌管理、自定義緩存策略。'
    },
    {
        img: img4,
        title: '高性能儲存',
        desc: '實時跟蹤全局熱度，超高速、大容量SSD存儲，有效提升緩存命中率、減少用戶訪問等待時間。'
    },
    {
        img: img5,
        title: '安全可靠',
        desc: '為客戶提供中立、安全、可靠的CDN雲服務。支持全鏈路HTTPS安全傳輸，網站防盜鏈等高級安全控制功能。'
    },
    {
        img: img6,
        title: '監控提示',
        desc: '全方位實時業務監控，支持分鐘級訪問/回源流量、帶寬、請求數、命中率各具體狀態碼數據監控，您可實時了解CDN服務狀態，輔助運維人員監測源站狀態。'
    },
])
</script>
  